"use client"; // 确保组件仅在客户端运行

export function showToast(message: string) {
    const toast = document.createElement('div');
    toast.innerText = message;

    // 设置 Toast 样式（顶部弹出）
    toast.style.position = 'fixed';
    toast.style.top = '-50px'; // 初始位置在可视区域外
    toast.style.left = '50%';
    toast.style.transform = 'translateX(-50%)';
    toast.style.background = '#323232';
    toast.style.color = '#fff';
    toast.style.padding = '12px 24px';
    toast.style.borderRadius = '6px';
    toast.style.boxShadow = '0px 2px 10px rgba(0, 0, 0, 0.2)';
    toast.style.zIndex = '9999';
    toast.style.fontSize = '14px';
    toast.style.opacity = '0';
    toast.style.transition = 'opacity 0.3s, top 0.3s';

    document.body.appendChild(toast);

    // 让 Toast 逐渐显示并滑动到顶部
    setTimeout(() => {
        toast.style.opacity = '1';
        toast.style.top = '30px'; // 滑入可视区域
    }, 100);

    // 3 秒后自动隐藏
    setTimeout(() => {
        toast.style.opacity = '0';
        toast.style.top = '-50px'; // 滑出可视区域
        setTimeout(() => toast.remove(), 300);
    }, 3000);
}


class LoadingToast {
    private toast: HTMLElement | null = null;

    private isClient(): boolean {
        return typeof window !== "undefined" && typeof document !== "undefined";
    }

    private injectStyles() {
        if (!this.isClient()) return;
        if (document.getElementById("loading-toast-style")) return;

        const style = document.createElement("style");
        style.id = "loading-toast-style";
        style.innerHTML = `
            .loader {
                border: 2px solid #f3f3f3;
                border-top: 2px solid #3498db;
                border-radius: 50%;
                width: 10px;
                height: 10px;
                animation: spin 1s linear infinite;
                margin: 0 auto 10px;
            }
            @keyframes spin {
                0% { transform: rotate(0deg); }
                100% { transform: rotate(360deg); }
            }
        `;
        document.head.appendChild(style);
    }

    open(message: string) {
        if (!this.isClient()) return;

        this.injectStyles(); // 确保样式存在
        this.close(); // 先关闭旧的，再创建新的

        this.toast = document.createElement("div");
        this.toast.innerHTML = `<div class="loader"></div> ${message}`;

        Object.assign(this.toast.style, {
            position: "fixed",
            top: "-50px",
            left: "50%",
            transform: "translateX(-50%)",
            background: "#323232",
            color: "#fff",
            padding: "12px 24px",
            borderRadius: "6px",
            boxShadow: "0px 2px 10px rgba(0, 0, 0, 0.2)",
            zIndex: "9999",
            fontSize: "14px",
            opacity: "0",
            transition: "opacity 0.3s, top 0.3s ease-in-out",
        });

        // console.log("✅ 添加 Toast...");
        document.body.appendChild(this.toast);

        setTimeout(() => {
            if (this.toast) {
                // console.log("✅ 显示加载框");
                this.toast.style.opacity = "1";
                this.toast.style.top = "30px";
            }
        }, 100);

        const closeButton = this.toast.querySelector(".close-btn");
        if (closeButton) {
            closeButton.addEventListener("click", () => this.close());
        }
    }

    close() {
        if (!this.isClient() || !this.toast) return;

        // console.log("❌ 关闭 Toast");
        this.toast.style.opacity = "0";
        this.toast.style.top = "-50px";
        setTimeout(() => {
            if (this.toast) this.toast.remove();
            this.toast = null;
        }, 300);
    }
}

const loadingToast = new LoadingToast();
export { loadingToast };





